<template>
    <div>
           <button @click="isShow = !isShow" :style="{color:'red','margin-top':'10px'}"> 显示||隐藏 </button>
            <transition name = 'text' :appear="true" >
              <h1 v-show="isShow" class="text">快看我</h1>
            </transition>
              <!-- transition只能包裹一个元素  transition-group能包裹多个但是里面的元素必须有key值 -->
            <transition-group name="text" :appear="true"> 
                <h1 v-show="isShow" class="text" key="1">过渡动画1</h1>
                <h1 v-show="isShow" class="text" key="2">过渡动画2</h1>
            </transition-group>
    </div>
</template>

<script>
export default {
    // 过渡
    name: 'spend',

    data() {
        return {
            isShow:true
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
.text{
    width: 100%;
    height: 68px;
    line-height: 68px;
    background-color: salmon;
    transition:0.5s linear;
}
/** vue默认transition包裹元素加了(transition的name)name-ender(给被进入的起点)类名 */
.text-enter{
    transform: translateX(-100%);
}
/** vue默认transition包裹元素加了(transition的name)name-ender-to(给被进入的终点)类名 */
.text-enter-to{
    transform: translateX(0);
}
/** vue默认transition包裹元素加了(transition的name)name-ender(给被离开的起点)类名 */
.text-leave{
    transform: translateX(0);
}
/** vue默认transition包裹元素加了(transition的name)name-ender-to(给被离开的终点)类名 */
.text-leave-to{
    transform: translateX(-100%);
}
</style>